<template>
  <PageListContainer class="notice-list">
    <div class="base-block"></div>
    <div class="base-block">
      <k-toolbar>
        <el-button type="primary" @click="onClickAdd">创建</el-button>
      </k-toolbar>

      <k-table v-bind="tableState" v-on="tableEvent">
        <template #actions="s">
          <el-link type="primary" @click="onClickEdit(s.row)">编辑</el-link>
          <el-link type="danger" @click="onClickDel(s.row)">删除</el-link>
          <el-link type="primary" @click="onClickView(s.row)">查看</el-link>
        </template>
      </k-table>
    </div>

    <EditModal ref="editModal"></EditModal>

  </PageListContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import EditModal from './components/edit-modal.vue';
import { useTableList } from './hooks/use-table';
defineOptions({ name: 'DemoList' });

const { tableState, tableEvent } = useTableList({});

const editModal = ref();

const onClickAdd =() => {
  editModal.value.show(0);
};
const onClickEdit =(row: any) => {
  console.log('row', row);

  editModal.value.show(1, row);
};
const onClickDel =(row: any) => {
  console.log('onClickDel', row);
};
const onClickView =(row: any) => {
  console.log('onClickView', row);
};

</script>
